import EventEmitter from "@/eventEmitter";
import GUI from "lil-gui";
import PolyLineNodeGraph from "../shape/polyline";
import BezierCurveNodeGraph from "../shape/bezierCurve";
export default class LineGraphProperty extends EventEmitter {
  option = {
    lineWidth: 0,
    borderColor: "",
    isClose: true,
  };
  dom: HTMLDivElement;
  gui!: GUI;
  controllerMap = new Map();
  constructor() {
    super();
    this.dom = document.createElement("div");
    this.dom.style.width = "100%";
    this.dom.style.height = "100%";
  }
  init(node: PolyLineNodeGraph | BezierCurveNodeGraph) {
    this.gui = new GUI({ container: this.dom });
    this.gui.domElement.style.width = "100%";
    this.option.lineWidth = node.lineWidth;
    this.option.borderColor = node.borderColor;
    this.option.isClose = node.isClose;
    const lineWidthController = this.gui
      .add(this.option, "lineWidth")
      .onChange((value: number) => {
        this.onChange("lineWidth", value);
      });
    this.controllerMap.set("lineWidth", lineWidthController);
    const borderColorController = this.gui
      .addColor(this.option, "borderColor")
      .onChange((value: string) => {
        this.onChange("borderColor", value);
      });
    this.controllerMap.set("borderColor", borderColorController);
    const isCloseController = this.gui
      .add(this.option, "isClose")
      .onChange((value: boolean) => {
        this.onChange("isClose", value);
      });
    this.controllerMap.set("isClose", isCloseController);
  }
  destroy() {
    this.gui.destroy();
  }
  onChange(propertyName: string, propertyValue: any) {
    this.emit("propertyChange", {
      propertyName,
      propertyValue,
    });
  }
  setValue(propertyName: string, propertyValue: any) {
    if (!this.option.hasOwnProperty(propertyName)) {
      return;
    }
    (this.option as any)[propertyName] = propertyValue;
    this.controllerMap.get(propertyName).updateDisplay();
  }
  setOption(node: PolyLineNodeGraph | BezierCurveNodeGraph) {
    for (let key in this.option) {
      switch (key) {
        case "lineWidth":
          this.option.lineWidth = node.lineWidth;
          break;
        case "borderColor":
          this.option.borderColor = node.borderColor;
          break;
        case "isClose":
          this.option.isClose = node.isClose;
          break;
        default:
          break;
      }
      this.controllerMap.get(key).updateDisplay();
    }
  }
}
